<template>
  <div>
    <!-- 标题 -->
    <Nav :title="title"></Nav>
    <!-- 轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in goods.gallery" :key="item.id">
        <img class="img" :src="item.img_url" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 文字 -->
    <div class="text-goods">
      <!-- 标题 -->
      <div class="header">
        <div class="header-item">
          <div class="circle"></div>
          <span class="header-txt">30天无忧退货</span>
        </div>
        <div class="header-item">
          <div class="circle"></div>
          <span class="header-txt">30天无忧退货</span>
        </div>
        <div class="header-item">
          <div class="circle"></div>
          <span class="header-txt">30天无忧退货</span>
        </div>
      </div>
      <!-- 介绍 -->
      <div class="introduce">
        <div class="introduce-txt">
          <p class="txt-t">{{ txtBox.name }}</p>
          <p class="txt-m">{{ txtBox.goods_brief }}</p>
          <p class="txt-b">{{ txtBox.retail_price }}</p>
        </div>
        <div class="introduce-b">
          <p>请选择规格数量</p>
          <van-icon name="arrow" />
        </div>
      </div>

      <!-- 参数 -->
      <div class="parameter" v-if="goods.info">
        <p class="parameter-txt">商品参数</p>
        <img class="img" :src="goods.info.primary_pic_url" alt="" />
        <ul class="goodTxt">
          <li class="goodTxt-item" v-for="item in goods.attribute" :key="item.id">
            <div class="goodTxt-item-txt">
              {{ item.name }}
            </div>
            <div class="goodTxt-item-val">
              {{ item.value }}
            </div>
          </li>
        </ul>
      </div>

      <!-- 图片介绍 -->
      <div class="imgIn" v-html="imgIn"></div>
    </div>

    <!-- 底部商品 -->
    <Product :data="data"></Product>

    <!-- 底部购买 -->
    <div class="footer" v-if="goods.info">
      <van-action-bar class="cart">
        <van-action-bar-icon :color="goods.collected ? 'red' : ''" @click="collect" icon="star-o" text="收藏" />
        <van-action-bar-icon icon="shop-o" @click="toCartRou" :badge="goods.allnumber" text="购物车" />
        <van-action-bar-button color="#CEA62A " type="warning" text="加入购物车" @click="addCarts" />
        <van-action-bar-button color="#A04C19" type="danger" text="立即购买" @click="toCart" />
      </van-action-bar>
      <!-- 弹出层 -->
    </div>

    <van-popup closeable v-model:show="show" position="bottom" :style="{ height: '30%' }" v-if="goods.info">
      <div class="popBox">
        <img class="img" :src="goods.info.primary_pic_url" alt="" />
        <div class="box-r">
          <span>价格 {{ goods.info.retail_price
          }}</span>
          <span>数量{{ goods.info.goods_number
          }}</span>
          <van-stepper v-model="number" />
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { showToast } from 'vant'
import { detailaction, addCart, addcollect, submitAction } from '@/api/cart/cart'
import { useRoute, useRouter } from 'vue-router'
import { ref, watch } from 'vue'
export default {
  name: 'GoodList',
  setup () {
    const route = useRoute()
    const router = useRouter()
    const title = ref('商品详情')
    const show = ref(false)
    const id = ref('')
    const goods = ref('')
    const txtBox = ref('')
    const imgIn = ref('')
    const number = ref('')
    const data = ref('')
    function init () {
      id.value = route.query.id
      detailaction({
        openId: localStorage.getItem('openId'),
        id: id.value
      }).then((res) => {
        console.log(res)
        data.value = res.productList
        goods.value = res
        txtBox.value = res.info
        imgIn.value = res.info.goods_desc
      })
    }
    init()
    watch(() => route.query.id, (newValue, oldValue) => {
      console.log('刷新', route)
      init()
    })
    const addCarts = async () => {
      if (show.value) {
        console.log(show.value)
        const res = await addCart({
          goodsId: id.value,
          number: number.value,
          openId: localStorage.getItem('openId')
        })
        showToast('加入成功')
        console.log(res)
        init()
      } else {
        console.log(show.value)
        show.value = !show.value
      }
    }
    const collect = async () => {
      const a = await addcollect({
        goodsId: id.value,
        openId: localStorage.getItem('openId')
      })
      console.log(a)
      init()
    }
    const toGoodsDetail = (ids) => {
      id.value = ids
      router.replace({
        path: '/home/goodsDetail',
        query: { id: id.value }
      })
    }
    const toCartRou = () => {
      router.push('/cart')
    }
    const toCart = () => {
      if (show.value) {
        console.log('12')
        submitAction({
          openId: localStorage.getItem('openId'),
          allPrise: txtBox.value.retail_price * number.value,
          goodsId: id.value
        })
        router.push('/cart/order')
      } else {
        show.value = !show.value
      }
    }
    return { id, goods, toCartRou, txtBox, imgIn, number, addCarts, collect, toCart, toGoodsDetail, show, title, data }
  }
}
</script>

<style lang="scss" scoped>
@import './scss/index.scss'
</style>
